<template>
  <div class="dib bsb w100 h100 vam count-down unselect csp" @click="active">{{count | countFormat(format)}}</div>
</template>

<script>
  export default {
    name: "Countdown",
    props: {
      max: { // 开始时的值
        type: Number | String,
        default: 60
      },
      min: { // 结束计时的值（不会出现
        type: Number | String,
        default: 0
      },
      text: { // 显示文本
        type: String,
        default: '获取验证码'
      },
      format: { // 计时过程中格式化文本，参数为当前值
        type: Function,
        default(val) {
          return val + 's后重新获取';
        },
      },
    },
    data() {
      return {
        // 显示文本 / 时间
        count: this.text,
        // 计时过程中锁定点击
        lock: false,
        // 计时定时器
        timer: null
      }
    },
    watch: {},
    methods: {
      // 点击事件
      active() {
        let {lock, count, text} = this;
        if (lock || count !== text) return;
        this.lock = true;
        this.start();
      },
      // 开始计时事件 init 是否重新计数，
      start(init = true) {
        if (init) {
          this.count = this.max;
          this.$emit('starting', this); //可以通过this.stop()停止默认倒数，this.start()开始
        }
        this.timer = setTimeout(e => {
          this.count--;
          if (this.count > this.min) {
            this.start(false);
          } else {
            this.stop();
          }
        }, 1000);
      },
      // 结束计时
      stop() {
        clearTimeout(this.timer);
        this.timer = null;
        this.count = this.text;
        this.lock = false;
        this.$emit('ending', this); // 计时结束回调
      },
    },
    filters: {
      // 过滤倒计时显示的文本
      countFormat(count, format) {
        if (!isNaN(count)) {
          return format(count);
        } else {
          return count;
        }
      }
    }
  }
</script>
